<template>
    <scroll-view class="detail">
        <swiper class="swiper" circular :autoplay="false" style="width: 100%">
            <swiper-item v-for="(item, index) in images" :key="index">
                <div style="width: 100%" @click="clickImage(images, index)">
                    <img :src="item" style="width: 100%; object-fit: cover" />
                </div>
            </swiper-item>
        </swiper>
    </scroll-view>
    <!-- 基本信息 -->
    <div class="card">
        <text class="titleText"
            >商业的 [乌卡时代]，我们如何重塑商业价值-WAWARDS金网奖2023年商业计划领航秀峰会
        </text>
        <div style="height: 10px"></div>
        <div>
            <text class="free">免费</text>
        </div>
        <div style="height: 10px"></div>

        <TimePlace></TimePlace>
    </div>
    <div style="height: 10px; background-color: #f5f5f5"></div>
    <!-- 补充信息 -->
    <div class="card">
        <div class="row">
            <text class="subText">配送方式</text>
            <div style="width: 10px"></div>
            <text class="text12">虚拟商品无需发货</text>
        </div>
        <div class="row">
            <text class="subText">支付方式</text>
            <div style="width: 10px"></div>
            <text class="text12">支持现金+积分+优惠劵组合支付</text>
        </div>
        <div class="row">
            <text class="subText">会员权益</text>
            <div style="width: 10px"></div>
            <text class="text12">银牌会员</text>
        </div>
    </div>
    <div style="height: 10px; background-color: #f5f5f5"></div>
    <!-- 详细信息 -->

    <div class="card">
        <div>
            <text class="titleText" style="font-size: 16px">品牌详情</text>
        </div>
        <div>
            <rich-text :nodes="html"></rich-text>
        </div>
    </div>

    <!-- 底部navibar -->
    <div class="bottom" style="width: 100%">
        <div class="card row" style="padding-bottom: 20px">
            <!-- 商家电话 -->
            <div @click="showCallDialog">
                <img
                    src="@/activityPages/assets/ze-phone-circle-o@3x.png"
                    style="width: 30px; height: 30px"
                />
            </div>
            <div style="flex-grow: 1"></div>
            <div class="button" @click="toFillOrder">
                <div class="button">
                    <div
                        style="
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            height: 100%;
                            align-items: center;
                        "
                    >
                        立即预约
                    </div>
                </div>
            </div>
        </div>
        <!-- 电话弹窗 -->
        <uni-popup ref="callPop" type="bottom" :safe-area="false">
            <div
                class="card"
                style="
                    padding-bottom: 20px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                "
            >
                <text style="font-size: 10px; color: grey">联系电话</text>
                <div class="divider" style="height: 1px"></div>

                <text
                    style="font-size: 14px; color: #black; padding-top: 8px; padding-bottom: 8px"
                    @click="callPhone"
                    >商家电话：12356798910
                </text>
                <div class="divider"></div>
                <text
                    style="font-size: 13px; color: #525252; padding-top: 8px"
                    @click="closeCallPop"
                    >取消
                </text>
            </div>
        </uni-popup>
        <!-- 购买弹窗 -->
        <uni-popup ref="popup" type="bottom" :safe-area="false">
            <div class="card">
                <div class="row">
                    <div style="width: 200px; height: 84px">
                        <img
                            :src="'http://csx-prd-1259250653.cos.ap-shanghai.myqcloud.com/images/20230530/39961918BFE84902A6BCD2CB46D52CC8.jpg'"
                            style="width: 100%; height: 100%; object-fit: cover"
                        />
                    </div>
                    <div
                        style="
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                        "
                    >
                        <div>
                            <text
                                >商业的
                                [乌卡时代]，我们如何重塑商业价值-WAWARDS金网奖2023年商业计划领航秀峰会
                            </text>
                        </div>
                        <div class="row" style="color: rgba(236, 94, 65, 1); align-items: baseline">
                            <img
                                src="@/activityPages/assets/ze-points.png"
                                style="width: 19px; height: 16px"
                            />
                            <text style="font-size: 16px">300 </text>
                            <text style="font-size: 11px">积分</text>
                        </div>
                    </div>
                </div>

                <div class="greyBox">{{ '已选：规格值' }}</div>
                <text class="title">票类型</text>
                <div class="row">
                    <div class="text1">普通票</div>
                    <div class="text1">Vip 票</div>
                </div>
                <div style="height: 10px"></div>
                <div class="divider"></div>
                <div
                    class="row"
                    style="
                        justify-content: space-between;
                        width: 100%;
                        padding-bottom: 10px;
                        padding-top: 5px;
                    "
                >
                    <text class="title">选购数量</text>
                    <div class="row">
                        <div style="flex-grow: 1"></div>
                        <CountButtons :onCountChange="onCountChange"></CountButtons>
                        <!-- <div @click="minusCount">
                            <uni-icons
                                type="minus-filled"
                                size="30"
                                :color="buyCount <= 1 ? 'grey' : '#F9DF50'"
                            ></uni-icons>
                        </div>
                        <text style="font-size: 20px; width: 70px; text-align: center">{{
                            buyCount
                        }}</text>
                        <div @click="addCount">
                            <uni-icons type="plus-filled" size="30" color="#F9DF50"></uni-icons>
                        </div> -->
                    </div>
                </div>
                <div class="buttonBuyNow" @click="toFillOrder">立即预约</div>
                <div style="height: 20px"></div>
            </div>
        </uni-popup>
    </div>
</template>

<script setup>
import request from '@/utils/request'
import { defineComponent, reactive, ref, defineProps, getCurrentInstance } from 'vue'
import { onLaunch, onShow, onHide, onLoad } from '@dcloudio/uni-app'

import { useStore } from 'vuex'

import CountButtons from '@/components/activity/count-buttons.vue'
import TimePlace from '@/activityPages/components/time-place.vue'

// 获取当前组件实例
const buyCount = ref(1)
const id = defineProps(['id'])
const popup = ref(null)
const callPop = ref(null)
const images = [
    'https://bbc-cdn.csxqyg.com.cn/wimages/1278420/main/1278420_main_1597426489269.jpg',
    'http://csx-prd-1259250653.cos.ap-shanghai.myqcloud.com/images/20230420/B0EF52EDB98E427998E1D2AC780148C2.jpg',
    'http://csx-prd-1259250653.cos.ap-shanghai.myqcloud.com/images/20220828/1EA8C33B64244B0FA79B04563F9EE8C1.jpg'
]
const html = `<p><img style=\"width: 100%\" src=\"https://bbc-cdn.csxqyg.com.cn/wimages/1278420/detail/1278420_detail_1597426516641.jpg\" /> <img style=\"width: 100%\" src=\"https://bbc-cdn.csxqyg.com.cn/wimages/1278420/detail/1278420_detail_1597426516689.jpg\" /> <img style=\"width: 100%\" src=\"https://bbc-cdn.csxqyg.com.cn/wimages/1278420/detail/1278420_detail_1597426516730.jpg\" /> <img style=\"width: 100%\" src=\"https://bbc-cdn.csxqyg.com.cn/wimages/1278420/detail/1278420_detail_1597426516779.jpg\" /></p>
`
let params = {}

function toFillOrder() {
    uni.navigateTo({
        url: `/activityPages/order/fill-order?goodsId=${params.id}&count=${buyCount.value}`
    })
}

onLoad((e) => {
    console.log('activity detail load,e=', e)
    params = e
})

function clickImage(photos, index) {
    uni.previewImage({
        current: index,
        urls: photos
    })
}

function onCountChange(i) {
    buyCount.value = i
}

function callPhone() {
    uni.makePhoneCall({
        phoneNumber: '12312312313',
        success: () => {
            console.log('拨打电话成功！')
        },
        fail: () => {
            console.error('拨打电话失败！')
        }
    })
}

function closeCallPop() {
    callPop.value.close()
}

function showCallDialog() {
    callPop.value.open()
}

function addCount() {
    buyCount.value++
}

function minusCount() {
    if (buyCount.value <= 1) {
        return
    }
    buyCount.value--
}

function onBuy() {
    popup.value.open()
}
</script>

<style lang="scss" scoped>
.detail {
    background-color: #f5f5f5;
}

.title {
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: bold;
}

.buttonBuyNow {
    width: 100%;
    height: 30px;
    line-height: 20px;
    border-radius: 20px;
    background-color: rgba(236, 94, 65, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    text-align: center;
    font-family: Microsoft Yahei;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.addButton {
    background-color: #f9df50;
    border-radius: 9999px;
    width: 30px;
    height: 30px;
}

.divider {
    width: 999px;
    height: 2px;
    background-color: #f5f5f5;
    // border: 1px solid rgba(245, 245, 245, 1);
}

.greyBox {
    padding: 10px;
    line-height: 20px;
    border-radius: 5px;
    background-color: rgba(98, 98, 98, 0.14);
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: center;
    font-family: Roboto;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.text1 {
    padding: 10px;
    border-radius: 5px;
    background-color: rgba(98, 98, 98, 0.14);
    color: rgba(102, 102, 102, 1);
    font-size: 12px;
    margin-right: 20px;
}

.card {
    line-height: 20px;
    border-radius: 10px;
    background-color: white;
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: left;
    font-family: Roboto;
    padding: 10px;
    align-items: flex-start;

    display: flex;
    flex-direction: column;
}

.titleText {
    line-height: 20px;
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: left;
    font-family: PingFangSC-regular;
    font-weight: bold;
}

.free {
    line-height: 28px;
    color: rgba(50, 140, 0, 1);
    font-size: 20px;
    text-align: left;
    font-family: PingFangSC-regular;
}

.row {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.img {
    width: 20px;
    height: 20px;
}

.subText {
    color: rgba(153, 153, 153, 1);
    font-size: 14px;
    text-align: left;
    font-family: PingFangSC-regular;
}

.text12 {
    color: rgb(102, 102, 102);
    font-size: 12px;
    // text-align: left;
    text-align-last: justify;
    font-family: PingFangSC-regular;
}

.button {
    align-items: center;
    justify-content: center;
    width: 166px;
    height: 35px;
    line-height: 20px;
    border-radius: 20px;
    background-color: rgba(90, 187, 105, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    text-align: center;
    font-family: Microsoft Yahei;
    border: 0;
}

.bottom {
    position: fixed;
    bottom: calc(var(--window-bottom));
    z-index: 1030;
    margin-bottom: 0px;
}
</style>
